<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- a,1 创建页面结构 -->
        <router-link to="/">首页</router-link>
        <router-link to="/product/123">产品页面</router-link>
        <!-- 页面渲染的出口 -->
        <router-view></router-view>
    </div>
</body>
<!-- 引入依赖 -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    //创建根组件
    const Home = {
        template:`
            <div>首页</div>
        `,
        beforeRouteEnter(to,from,next){
            //在渲染该组件的对应路由被confirm前调用
            //不能获取组件实例 "this"
            //因为当守卫,组件实例还没被创建
            console.log("产品详情 beforeRouteEnter");
            //this => Product 因为组件还没有初始化 this => window
            console.log(this);
            next();
        },
        beforeRouteUpdate(to,from,next){
            //在当前路由改变,但是该组件被复用时调用
            //举例来说,对于一个带有动态参数的路径 /foo/:id, 在/foo/1 和 /foo/2 之间跳转您的时候
            //由于会渲染同样的Foo组件,因此组件实例会被复用,而这个钩子就会在这个情况下被调用,
            //可以访问组件实例 "this"
            console.log("更新的导航守卫里面: beforeRouterUpdate");
            console.log(this);
            next();
        },
        beforeRouteLeave(to,from,next){
            //导航离开该组件的对应路由时调用
            //可以访问组件实例 'this'
            console.log("离开当前组件路由时触发");
            next();
        },
    };
    const Product = {
        template:`
            <div>产品首页</div>
        `
    }
    //创建路由跟组件的关联
    const routes = [
        {
            path:"/",
            component:Home,
        },
        {
            path:"/product/:id", //这里是配置动态路由
            component:Product
        },
    ];
    //创建跟路由
    let router = new VueRouter({
        routes,
    })
    let vm = new Vue({
        //根路由执行完传到实例里面执行
        router,
        el:"#app"
    })
</script>
</html>